<mat-toolbar class="px-0">
  @if (user) {
    <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
      <a
        class="align-items-center justify-content-start rounded-0"
        mat-button
        [ngClass]="{ 'w-100': hasTabs }"
        [routerLink]="['/']"
        (click)="onLogoClick()"
      >
        <gf-logo class="px-2" [label]="pageTitle" />
      </a>
    </div>
    <span class="gf-spacer"></span>
    <ul class="align-items-center d-flex list-inline m-0 px-2">
      <li class="list-inline-item">
        <a
          class="d-none d-sm-block"
          i18n
          mat-flat-button
          [ngClass]="{
            'font-weight-bold':
              currentRoute === internalRoutes.home.path ||
              currentRoute === internalRoutes.zen.path,
            'text-decoration-underline':
              currentRoute === internalRoutes.home.path ||
              currentRoute === internalRoutes.zen.path
          }"
          [routerLink]="['/']"
          >Overview</a
        >
      </li>
      <li class="list-inline-item">
        <a
          class="d-none d-sm-block"
          i18n
          mat-flat-button
          [ngClass]="{
            'font-weight-bold': currentRoute === internalRoutes.portfolio.path,
            'text-decoration-underline':
              currentRoute === internalRoutes.portfolio.path
          }"
          [routerLink]="routerLinkPortfolio"
          >Portfolio</a
        >
      </li>
      <li class="list-inline-item">
        <a
          class="d-none d-sm-block"
          i18n
          mat-flat-button
          [ngClass]="{
            'font-weight-bold': currentRoute === internalRoutes.accounts.path,
            'text-decoration-underline':
              currentRoute === internalRoutes.accounts.path
          }"
          [routerLink]="routerLinkAccounts"
          >Accounts</a
        >
      </li>
      @if (hasPermissionToAccessAdminControl) {
        <li class="list-inline-item">
          <a
            class="d-none d-sm-block"
            i18n
            mat-flat-button
            [ngClass]="{
              'font-weight-bold':
                currentRoute === internalRoutes.adminControl.path,
              'text-decoration-underline':
                currentRoute === internalRoutes.adminControl.path
            }"
            [routerLink]="routerLinkAdminControl"
            >Admin Control</a
          >
        </li>
      }
      <li class="list-inline-item">
        <a
          class="d-none d-sm-block"
          i18n
          mat-flat-button
          [ngClass]="{
            'font-weight-bold': currentRoute === routeResources,
            'text-decoration-underline': currentRoute === routeResources
          }"
          [routerLink]="routerLinkResources"
          >Resources</a
        >
      </li>
      @if (
        hasPermissionForSubscription && user?.subscription?.type === 'Basic'
      ) {
        <li class="list-inline-item">
          <a
            class="d-none d-sm-block"
            mat-flat-button
            [ngClass]="{
              'font-weight-bold': currentRoute === routePricing,
              'text-decoration-underline': currentRoute === routePricing
            }"
            [routerLink]="routerLinkPricing"
          >
            <span class="align-items-center d-flex">
              <span i18n>Pricing</span>
              @if (currentRoute !== routePricing && hasPromotion) {
                <span class="badge badge-warning ml-1">%</span>
              }
            </span>
          </a>
        </li>
      }
      <li class="list-inline-item">
        <a
          class="d-none d-sm-block"
          i18n
          mat-flat-button
          [ngClass]="{
            'font-weight-bold': currentRoute === routeAbout,
            'text-decoration-underline': currentRoute === routeAbout
          }"
          [routerLink]="routerLinkAbout"
          >About</a
        >
      </li>
      @if (hasPermissionToAccessAssistant) {
        <li class="list-inline-item">
          <button
            #assistantTrigger="matMenuTrigger"
            class="h-100 no-min-width px-2"
            mat-button
            matBadge="✓"
            matBadgeSize="small"
            [mat-menu-trigger-for]="assistantMenu"
            [matBadgeHidden]="!hasFilters || !hasPermissionToChangeFilters"
            [matMenuTriggerRestoreFocus]="false"
            (menuOpened)="onOpenAssistant()"
          >
            <ion-icon class="rotate-90" name="options-outline" />
          </button>
          <mat-menu
            #assistantMenu="matMenu"
            class="no-max-width"
            xPosition="before"
            [overlapTrigger]="true"
            (closed)="assistantElement?.setIsOpen(false)"
          >
            <gf-assistant
              #assistant
              [deviceType]="deviceType"
              [hasPermissionToAccessAdminControl]="
                hasPermissionToAccessAdminControl
              "
              [hasPermissionToChangeDateRange]="hasPermissionToChangeDateRange"
              [hasPermissionToChangeFilters]="hasPermissionToChangeFilters"
              [user]="user"
              (closed)="closeAssistant()"
              (dateRangeChanged)="onDateRangeChange($event)"
              (filtersChanged)="onFiltersChanged($event)"
            />
          </mat-menu>
        </li>
      }
      <li class="list-inline-item">
        <button
          class="no-min-width px-1"
          mat-flat-button
          [matMenuTriggerFor]="accountMenu"
          (menuClosed)="onMenuClosed()"
          (menuOpened)="onMenuOpened()"
        >
          <ion-icon
            class="d-none d-sm-block"
            name="person-circle-outline"
            size="large"
          />
          <ion-icon
            class="d-block d-sm-none"
            size="large"
            [name]="isMenuOpen ? 'close-outline' : 'menu-outline'"
          />
        </button>
        <mat-menu #accountMenu="matMenu" xPosition="before">
          @if (
            hasPermissionForSubscription && user?.subscription?.type === 'Basic'
          ) {
            <a class="d-flex" mat-menu-item [routerLink]="routerLinkPricing"
              ><span class="align-items-center d-flex"
                ><span>
                  @if (user.subscription.offer.isRenewal) {
                    <ng-container i18n>Renew Plan</ng-container>
                  } @else {
                    <ng-container i18n>Upgrade Plan</ng-container>
                  }
                </span>
                <gf-premium-indicator
                  class="d-inline-block ml-1"
                  [enableLink]="false" /></span
            ></a>
            <hr class="m-0" />
          }
          @if (user?.access?.length > 0) {
            <button mat-menu-item (click)="impersonateAccount(null)">
              <span class="align-items-center d-flex">
                <ion-icon
                  class="mr-2"
                  [name]="
                    hasImpersonationId
                      ? 'radio-button-off-outline'
                      : 'radio-button-on-outline'
                  "
                />
                <span i18n>Me</span>
              </span>
            </button>
            @for (accessItem of user?.access; track accessItem) {
              <button mat-menu-item (click)="impersonateAccount(accessItem.id)">
                <span class="align-items-center d-flex">
                  <ion-icon
                    class="mr-2"
                    name="square-outline"
                    [name]="
                      accessItem.id === impersonationId
                        ? 'radio-button-on-outline'
                        : 'radio-button-off-outline'
                    "
                  />
                  @if (accessItem.alias) {
                    <span>{{ accessItem.alias }}</span>
                  } @else {
                    <span i18n>User</span>
                  }
                </span>
              </button>
            }
            <hr class="m-0" />
          }
          <a
            class="d-flex d-sm-none"
            i18n
            mat-menu-item
            [ngClass]="{
              'font-weight-bold':
                currentRoute === internalRoutes.home.path ||
                currentRoute === internalRoutes.zen.path
            }"
            [routerLink]="['/']"
            >Overview</a
          >
          <a
            class="d-flex d-sm-none"
            i18n
            mat-menu-item
            [ngClass]="{
              'font-weight-bold': currentRoute === internalRoutes.portfolio.path
            }"
            [routerLink]="routerLinkPortfolio"
            >Portfolio</a
          >
          <a
            class="d-flex d-sm-none"
            i18n
            mat-menu-item
            [ngClass]="{
              'font-weight-bold': currentRoute === internalRoutes.accounts.path
            }"
            [routerLink]="routerLinkAccounts"
            >Accounts</a
          >
          <a
            i18n
            mat-menu-item
            [ngClass]="{
              'font-weight-bold': currentRoute === internalRoutes.account.path
            }"
            [routerLink]="routerLinkAccount"
            >My Ghostfolio</a
          >
          @if (hasPermissionToAccessAdminControl) {
            <a
              class="d-flex d-sm-none"
              i18n
              mat-menu-item
              [ngClass]="{
                'font-weight-bold':
                  currentRoute === internalRoutes.adminControl.path
              }"
              [routerLink]="routerLinkAdminControl"
              >Admin Control</a
            >
          }
          <hr class="m-0" />
          <a
            class="d-flex d-sm-none"
            i18n
            mat-menu-item
            [ngClass]="{
              'font-weight-bold': currentRoute === routeResources
            }"
            [routerLink]="routerLinkResources"
            >Resources</a
          >
          @if (
            hasPermissionForSubscription && user?.subscription?.type === 'Basic'
          ) {
            <a
              class="d-flex d-sm-none"
              mat-menu-item
              [ngClass]="{ 'font-weight-bold': currentRoute === routePricing }"
              [routerLink]="routerLinkPricing"
            >
              <span class="align-items-center d-flex">
                <span i18n>Pricing</span>
                @if (currentRoute !== routePricing && hasPromotion) {
                  <span class="badge badge-warning ml-1">%</span>
                }
              </span>
            </a>
          }
          <a
            class="d-flex d-sm-none"
            i18n
            mat-menu-item
            [ngClass]="{ 'font-weight-bold': currentRoute === routeAbout }"
            [routerLink]="routerLinkAbout"
            >About Ghostfolio</a
          >
          <hr class="d-flex d-sm-none m-0" />
          <button i18n mat-menu-item (click)="onSignOut()">Log out</button>
        </mat-menu>
      </li>
    </ul>
  }
  @if (user === null) {
    <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
      <a
        class="align-items-center justify-content-start rounded-0"
        mat-button
        [ngClass]="{ 'w-100': hasTabs }"
        [routerLink]="['/']"
      >
        <gf-logo
          class="px-2"
          [label]="pageTitle"
          [showLabel]="currentRoute !== 'register'"
        />
      </a>
    </div>
    <span class="gf-spacer"></span>
    <ul class="align-items-center d-flex list-inline m-0 px-2">
      <li class="list-inline-item">
        <a
          class="d-none d-sm-block"
          i18n
          mat-flat-button
          [ngClass]="{
            'font-weight-bold': currentRoute === routeFeatures,
            'text-decoration-underline': currentRoute === routeFeatures
          }"
          [routerLink]="routerLinkFeatures"
          >Features</a
        >
      </li>
      <li class="list-inline-item">
        <a
          class="d-none d-sm-block"
          i18n
          mat-flat-button
          [ngClass]="{
            'font-weight-bold': currentRoute === routeAbout,
            'text-decoration-underline': currentRoute === routeAbout
          }"
          [routerLink]="routerLinkAbout"
          >About</a
        >
      </li>
      @if (hasPermissionForSubscription) {
        <li class="list-inline-item">
          <a
            class="d-sm-block"
            mat-flat-button
            [ngClass]="{
              'font-weight-bold': currentRoute === routePricing,
              'text-decoration-underline': currentRoute === routePricing
            }"
            [routerLink]="routerLinkPricing"
          >
            <span class="align-items-center d-flex">
              <span i18n>Pricing</span>
              @if (currentRoute !== routePricing && hasPromotion) {
                <span class="badge badge-warning ml-1">%</span>
              }
            </span>
          </a>
        </li>
      }
      @if (hasPermissionToAccessFearAndGreedIndex) {
        <li class="list-inline-item">
          <a
            class="d-none d-sm-block"
            i18n
            mat-flat-button
            [ngClass]="{
              'font-weight-bold': currentRoute === routeMarkets,
              'text-decoration-underline': currentRoute === routeMarkets
            }"
            [routerLink]="routerLinkMarkets"
            >Markets</a
          >
        </li>
      }
      <li class="list-inline-item">
        <a
          class="d-none d-sm-block no-min-width p-1"
          href="https://github.com/ghostfolio/ghostfolio"
          mat-flat-button
          ><ion-icon name="logo-github"
        /></a>
      </li>
      <li class="list-inline-item">
        <button class="d-sm-block" mat-flat-button (click)="openLoginDialog()">
          <ng-container i18n>Sign in</ng-container>
        </button>
      </li>
      @if (currentRoute !== 'register' && hasPermissionToCreateUser) {
        <li class="list-inline-item ml-1">
          <a
            class="d-none d-sm-block"
            color="primary"
            i18n
            mat-flat-button
            [routerLink]="routerLinkRegister"
            >Get Started</a
          >
        </li>
      }
    </ul>
  }
</mat-toolbar>
